<template>
  <div id="app">
    <cm-table
      :columns="columns"
      :dataSource="dataSource"
      @on-select-change="onSelectChange"
      @on-sort="onSort"
    />
  </div>
</template>

<script>
import cmTable from "./components/cmTable.vue";

export default {
  name: "App",
  components: {
    cmTable,
  },
  data() {
    return {
      columns: [
        {
          type: 'selection'
        },
        {
          title: "姓名",
          key: "name"
        },
        {
          title: "年龄",
          key: "age",
          sortable: true
        },
        {
          title: "职位",
          key: "job",
          filterable: true
        },
      ],
      dataSource: {
        pageSize:3,
        pageCurrent:2,
        dataList:[
          {
          id: 1,
          name: "Jasmine",
          age: 18,
          job: "产品",
        },
        {
          id: 2,
          name: "Mango",
          age: 18,
          job: "设计",
        },
        {
          id: 3,
          name: "Aking",
          age: 24,
          job: "前端",
        },
        {
          id: 4,
          name: "Dick",
          age: 30,
          job: "后端",
        },
        {
          id: 5,
          name: "Lucy",
          age: 18,
          job: "测试",
        },
        {
          id: 6,
          name: "Lala",
          age: 23,
          job: "测试",
        },
        ]
      },
    };
  },
  methods: {
    onSelectChange(data){
      console.log(data)
    },
    onSort(data){
      console.log(data)
    }
  }
};
</script>

<style></style>
